<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>02案例-歌曲全选反选的案例</title>
    </head>
    <body>
    <div id="container"></div>
    <div id="control"></div>
    </body>
    <script src="../../02jquery/jquery-3.1.0/jquery-3.1.0.min.js"></script>
    <script>
    var musices = [];
    for(var i = 0; i < 10; i++){
    	musices.push('歌曲'+(i+1));
    }

	// 生成 input:checkbox 标签
	$($.map(musices,function(v,i){
		return '<input type="checkbox" />'+v+'<br/>';
	}).join('')).appendTo('#container');


	//添加按钮
	var $btn_all = $('<input type="button" value="全选">');
	$btn_all.appendTo('#control');
	var $btn_no = $('<input type="button" value="全不选">');
	$btn_no.appendTo('#control');
	var $btn_fan = $('<input type="button" value="反选">');
	$btn_fan.appendTo('#control');

	//添加事件
	//1>全选按钮事件
	$btn_all.click(function(){
		$('#container input').prop('checked',true);
	});
	// 2> 全部选
	$btn_no.click(function(){
		$(':checkbox').prop('checked',false);
	});

	// 3> 反选
	$btn_fan.click(function(){
		$(':checkbox').each(function(){
			this.checked = !this.checked;
		})
	})
	
	
	
	
	
	
	
	

    </script>
</html>